<script setup lang="ts">
import { Connection, Cpu, Lightning, Monitor } from '@element-plus/icons-vue';

defineOptions({ name: 'RectangleContent' });
const researchItems = [
  {
    icon: Monitor,
    title: '人工智能',
    description:
      '深度学习模型优化与应用研究，实现 AI 技术产业化落地。重点突破计算机视觉、自然语言处理等关键技术，推动智能制造升级。',
    bgImage:
      'https://ai-public.mastergo.com/ai/img_res/e5a6d23743ca29968a25d509959204ca.jpg',
  },
  {
    icon: Cpu,
    title: '量子科技',
    description:
      '研发新一代量子计算芯片，突破量子比特相干时间限制。开展量子通信网络构建，实现安全高效的信息传输。',
    bgImage:
      'https://ai-public.mastergo.com/ai/img_res/17b5d89547bba23599bad82cbe5eaae7.jpg',
  },
  {
    icon: Lightning,
    title: '新能源',
    description:
      '开发高效光伏材料与储能系统，建设智能电网示范工程。推进氢能源技术研究，构建清洁能源生态体系。',
    bgImage:
      'https://ai-public.mastergo.com/ai/img_res/0741d2d5526223b6744f2357d34595c7.jpg',
  },
  {
    icon: Connection,
    title: '生物医药',
    description:
      '创新药物研发平台建设，攻克重大疾病治疗难题。推进精准医疗技术应用，提供个性化治疗方案。',
    bgImage:
      'https://ai-public.mastergo.com/ai/img_res/dbea9d7c800a018047898da1aadd0d56.jpg',
  },
];
</script>

<template>
  <!-- 长方形内容 -->
  <div class="research-section">
    <div class="section-container">
      <h2 class="section-title">研究领域</h2>
      <div class="research-grid">
        <div
          v-for="(item, index) in researchItems"
          :key="index"
          class="research-card group"
        >
          <img :alt="item.title" :src="item.bgImage" class="card-image" />
          <div class="card-overlay"></div>
          <div class="card-content">
            <el-icon class="content-icon">
              <component :is="item.icon" />
            </el-icon>
            <h3 class="content-title">{{ item.title }}</h3>
            <p class="content-description">{{ item.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.research-section {
  @apply bg-gray-50 py-20;
}

.section-container {
  @apply container mx-auto px-4;
}

.section-title {
  @apply mb-12 text-center text-3xl font-bold;
}

.research-grid {
  @apply grid grid-cols-2 gap-8;
}

.research-card {
  @apply relative overflow-hidden rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl;
}

.card-image {
  @apply absolute inset-0 h-full w-full object-cover object-top transition-transform duration-300;
}

.group:hover .card-image {
  @apply scale-110;
}

.card-overlay {
  @apply absolute inset-0 bg-gradient-to-b from-black/60 to-black/80;
}

.card-content {
  @apply relative p-8;
}

.content-icon {
  @apply mb-4 text-4xl text-white;
}

.content-title {
  @apply mb-4 text-2xl font-bold text-white;
}

.content-description {
  @apply text-gray-200;
}
</style>
